<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" class="message">
<button type="button" class="btn">发送</button>

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script>
    // 连接 websocket
    let socket = new WebSocket("ws://localhost:8080/websocket/Rose");
    // 连接成功触发
    socket.onopen = function () {
        console.log("连接成功");
    };
    // 收到消息触发
    socket.onmessage = function (evt) {
        console.log("收到数据：" + evt.data);
    };
    // 发送消息
    $(".btn").click(function () {
        var message = $(".message").val();
        socket.send(message);
    });
    // 当收到服务器发送的关闭连接请求时触发
    socket.onclose = function () {
        console.log("服务器关闭");
    };
    // 捕获异常
    socket.onerror = function () {
        console.log("连接异常。。。")
    }
</script>
</body>
</html>